<template>
  <div class="product-item " @click.stop="goDetail">
    <img class="" :src="info.picUrl" alt="" />
    <div class="item-r">
      <div class="name line-clamp1">{{ info.productName }}</div>
      <div class="price">
        <span class="price-now"><span class="price-yuan">￥</span>{{ info.activityPriceYuan }}</span>
        <span class="price-old">￥{{ info.priceYuan }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "h-product-item",
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },

  },
  components: {
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    ...mapActions(["openRouteByWebview"]),
    goDetail() {
      this.openRouteByWebview({
        route: `/goods/detail?id=${this.info.id}`,
        jumpType: 'push',
        sendLocation: true
      })
      return;
    }
  },
  mounted() { }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.product-item {
  display: flex;
  margin-bottom: 12px;

  img {
    width: 55px;
    height: 55px;
    margin-right: 4px;
  }

  .item-r {
    .name {
      font-family: MILanPro--GB1, MILanPro--GB1;
      font-size: 12px;
      color: #333333;
      //一行溢出显示点
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100px;
      text-align: left;
    }

    .price {
      position: relative;
      background: url("./../../assets/images/indexNew/price-bg.png") no-repeat center center;
      background-size: contain;
      width: 100px;
      height: 30px;

      .price-now {
        position: absolute;
        font-family: MILanPro--GB1, MILanPro--GB1;
        font-size: 14px;
        color: #f51249;
        right: 10px;
        top: 0;

        .price-yuan {
          font-size: 12px;
        }
      }

      .price-old {
        position: absolute;
        font-family: MILanPro--GB1, MILanPro--GB1;
        font-size: 10px;
        color: #999999;
        bottom: -1px;
        left: 0;
      }
    }
  }
}
</style>
